<template>
  <div>
    <!--    面包屑导航-->
    <el-breadcrumb style="padding-bottom:15px " separator="/">
      <el-breadcrumb-item :to="{ path: '/exceed' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目添加</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    页面内容-->
    <el-card>
      <!--    搜索头部-->
      <el-row :gutter="40" style="padding-bottom: 15px">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" @keyup.enter.native="Search"
                    clearable>
            <el-button slot="append" icon="el-icon-search" @click="Search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="addExceed">添加用户</el-button>
        </el-col>
        <el-col :span="4" style="  position:absolute; left:90%;">
          <el-button type="primary" icon="el-icon-refresh-right" @click="getExceedList"></el-button>
        </el-col>
      </el-row>
      <!--      渲染数据表格fr-->
      <el-table
          :data="ExceedList.data"
          border
          style="width: 100%">
        <el-table-column
            type="index"
            width="35">
        </el-table-column>
        <!--        <el-table-column-->
        <!--            prop="u_name"-->
        <!--            label="姓名"-->
        <!--            width="180">-->
        <!--        </el-table-column>-->
        <el-table-column
            prop="e_number"
            label="学号"
            width="300">
        </el-table-column>
        <el-table-column
            prop="e_name"
            label="姓名"
            width="300">
        </el-table-column>
        <el-table-column
            prop="e_school"
            label="学校"
            width="300">
        </el-table-column>
        <el-table-column
            prop="e_time"
            label="出校时间"
            width="300">
        </el-table-column>

        <el-table-column
            prop="e_id"
            label="操作1"
            width="318">
          <div slot-scope="scope">
            <!--                        <el-tooltip class="item" effect="dark" content="查看" placement="top">-->
            <!--                          <el-button icon="el-icon-search" size="mini"></el-button>-->
            <!--                        </el-tooltip>-->
            <el-button type="primary" size="mini" @click="updateExceed(scope.row)">查看/编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteExceed(scope.row)">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
      <!--      分页控件-->
      <el-pagination
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ExceedList.count">
      </el-pagination>
      <!--      编辑用户dialog对话框-->
      <el-dialog
          title="编辑用户"
          :visible.sync="dialogUpdateExceed"
          width="30%">
        <!--        内容区域-->
        <el-form :model="UpdateExceedList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <!--          <el-form-item label="姓名">-->
          <!--            <el-input v-model="UpdateUserList.u_name" disabled></el-input>-->
          <!--          </el-form-item>-->

          <el-form-item label="学号" prop="e_number">
            <el-input v-model="UpdateExceedList.e_number" ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="e_name">
            <el-input v-model="UpdateExceedList.e_name" ></el-input>
          </el-form-item>
          <el-form-item label="学校" prop="e_school">
            <el-input v-model="UpdateExceedList.e_school"></el-input>
          </el-form-item>
          <el-form-item label="出校时间" prop="e_time">
            <el-input v-model="UpdateExceedList.e_time"></el-input>
          </el-form-item>
          <!--          <el-form-item label="身份证号" prop="user_id">-->
          <!--            <el-input v-model="UpdateUserList.user_id"></el-input>-->
          <!--          </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUpdateExceed = false">取 消</el-button>
    <el-button type="primary" @click="updateExceed1">保 存</el-button>
  </span>
      </el-dialog>
      <el-dialog
          title="添加用户"
          :visible.sync="dialogAddExceed"
          width="30%">
        <!--        内容区域-->
        <el-form :model="AddExceedList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">


          <el-form-item label="学号" prop="e_number">
            <el-input v-model="AddExceedList.e_number" ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="e_name">
            <el-input v-model="AddExceedList.e_name" ></el-input>
          </el-form-item>
          <el-form-item label="学校" prop="e_school">
            <el-input v-model="AddExceedList.e_school"></el-input>
          </el-form-item>
          <el-form-item label="出校时间" prop="e_time">
            <el-input v-model="AddExceedList.e_time"></el-input>
          </el-form-item>
          <el-button type="primary" @click="addExceed1" class="a">添 加</el-button>
        </el-form>

      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Exceed",
  //数据
  data() {
    return {
      input3: null,
      page: 1,
      limit: 10,
      ExceedList: [],
      UpdateExceedList: {
        e_id: '',

      },
      AddExceedList:{
        e_number: "",
        e_name: "",
        e_school: "",
        e_time: "",
      },
      dialogAddExceed: false,
      dialogUpdateExceed: false,

    }
  },
  //方法
  methods: {
    //添加
    addExceed(){
      this.dialogAddExceed = !this.dialogAddExceed
    },
    addExceed1(){
      this.dialogAddExceed = !this.dialogAddExceed
      this.$http.get("/ExceedController/addExceed", {
        params: {
          e_id: this.AddExceedList.e_id,
          e_number: this.AddExceedList.e_number,
          e_name: this.AddExceedList.e_name,
          e_school: this.AddExceedList.e_school,
          e_time: this.AddExceedList.e_time,
        }
      }).then((res) => {
        console.log(res)
        this.ExceedList = res.data;
        if (res.data.code === 1) {
          this.$message.success("添加成功")
          this.getExceedList();
        } else this.$message.error("添加失败")
      })
    },
    //关键字搜索
    Search() {
      console.log(this.input3)
      this.$http.get("/ExceedController/selectWhereExceed", {
        params: {
          page: 1,
          limit: 10,
          Keyword: this.input3,
        }
      }).then((res) => {
        console.log(res.data)
        this.ExceedList = res.data;
        if (res.data.code === 1) {
          this.$message.success("搜索成功")
        } else this.$message.error("搜索失败")
      })
    },
    //请求查看用户列表数据
    getExceedList() {
      this.$http.get("/ExceedController/queryExceed", {
        params: {
          page: this.page,
          limit: this.limit,
        }
      }).then((res) => {
        // console.log(res)
        this.ExceedList = res.data;
        if (res.data.code === 1) {
          // this.$message.success("请求成功")
        } else this.$message.error("请求失败")
      })
    },
    //编辑按钮事件
    updateExceed(row) {
      this.dialogUpdateExceed = !this.dialogUpdateExceed
      this.UpdateExceedList = row;
      console.log(this.UpdateExceedList)
    },
    //确定编辑事件
    updateExceed1() {
      this.dialogUpdateExceed = !this.dialogUpdateExceed
      this.$http.get("/ExceedController/updataExceed", {
        params: {
          //user: this.UpdateUserList,
          e_id: this.UpdateExceedList.e_id,
          e_number: this.UpdateExceedList.e_number,
          e_name: this.UpdateExceedList.e_name,
          e_school: this.UpdateExceedList.e_school,
          e_time: this.UpdateExceedList.e_time,
        }
      }).then((res) => {
        console.log(res)
        this.ExceedList = res.data;
        if (res.data.code === 1) {
          this.$message.success("保存成功")
          this.getExceedList();
        } else this.$message.error("保存失败")
      })
    },
    //删除按钮事件
    deleteExceed(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get("/ExceedController/deleteExceed", {
          params: {
            id: row.e_id,
          }
        }).then((res) => {
          console.log(res)
          if (res.data.code === 1) {
            this.$message.success("删除成功")
            this.getExceedList();
          } else this.$message.error("删除失败")
        }).catch(()=>{
          this.$message.error("删除失败")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //每页条数发生改变时触发
    SizeChange(limit) {
      this.limit = limit;
      this.getExceedList();
    },
    //页码发生改变时触发
    CurrentChange(page) {
      this.page = page;
      this.getExceedList();
    },
  },
  //  钩子函数
  created() {
    this.getExceedList();
  }
}
</script>

<style scoped>
.a{
  margin-left: 360px;
  margin-top: 20px;
}
</style>